import React, { useMemo, useState } from 'react'
import { } from '../../App.css'
//  sled  已选    booked  预约    vavi 可选
const index = () => {

  let price = 100
  const initsetadata = Array.from({ length: 50 }, (_, index) => {
    return {
      id: `D${index + 1}`,
      status: index == 1 || index == 2 || index == 48 || index == 49
        ? 'sled'
        : index % 3 == 0
          ? 'booked'
          : 'vavi'
    }
  })
  console.log(initsetadata);
  const [seatdata, setSeatdata] = useState(initsetadata)

  const dj = (id) => {
    setSeatdata((per) => {
      return per.map((item, index) => {
        if (item.id == id && item.status !== 'booked') {
          return {
            ...item,
            status: item.status == 'sled' ? 'vavi' : 'sled'
          }
        }
        return item
      })
    })
  }

  const getdate = useMemo(() => {
    return seatdata.filter((item) => item.status == 'sled')

  }, [seatdata])
  return (
    <div>
      <div className='state_worp'>
        {
          seatdata.map((item, index) => {
            return <div key={index} onClick={() => dj(item.id)} className={`item-state  item-state-${item.status}`}>
              {item.status == 'sled' && <b>{item.id}</b>}
            </div>
          })
        }
      </div>
      <div className='length'>
        <div className='length-item'>
          <div className='item-dont item-dont-sled'></div>已选
        </div>
        <div className='length-item'>
          <div className='item-dont item-dont-booked'></div>预约
        </div>
        <div className='length-item'>
          <div className='item-dont item-dont-vavi'></div>可选
        </div>
      </div>

      <div>
        <span>已选{getdate.length}座 <b>{getdate.map((item) => item.id).join(',')}</b></span>
        <span>总价：{getdate.length * price.toFixed(2)}</span>
      </div>

    </div>

  )
}

export default index
